<template>
  <div class="mem">
    <div class="space"></div>
    <loading :state="state"/>
    <div class="main">
      <!--测试按钮-->
      <!--<div @click="demo">测试按钮</div>-->
      <!--这是放搜索的结果的东东-->
      <div v-if="memData.status === 'ok'">
        <member-list-item :item="memData" :index="0"></member-list-item>
      </div>
      <div v-else-if="memData.status ==='no'" class="demo_in">
        <mem-search-item-top :item="memData"></mem-search-item-top>
      </div>
      <!--这是放正常列表的东东-->
      <div class="list_main" v-show="listState">
        <div class="top">
          <div style="width: 100%;overflow: hidden">
            <ul class="top1">
              <li v-for="(item , index) in btn_One" @click="checkFun(index)"
                  :class="[normalone,{activesone:index === indexsone}]"
                  :key="item.id">
                {{item.name}}
              </li>
            </ul>
            <ul class="top2" v-show="secState">
              <li v-for="(item , index) in btn_Sec" @click="checkFun2(index)"
                  :class="[normalsec,{activessec:index === indexssec}]"
                  :key="item.id">
                {{item.name}}
              </li>
            </ul>
            <div class="top3">
              <ul class="top3_in">
                <li v-for="(item , index) in btn_Thr" @click="checkFun3(index)"
                    :class="[normalthr,{activesthr:index === indexsthr}]"
                    :key="item.id">
                  {{item.name}}
                </li>
              </ul>
              <div class="top3_r" @click="sortFun">
                <p style="color: #666">按时间排序</p>
                <img :src="this.$Public.iconImg+'triangle.svg'" alt="" :class="[icon,{sort:sorts} ]">
              </div>
            </div>
          </div>
        </div>
        <div class="space"></div>
        <member-list-statistics :memListM="memListM"></member-list-statistics>
        <ul v-infinite-scroll="loadMore"
            infinite-scroll-disabled="false"
            infinite-scroll-distance="1"
            infinite-scroll-immediate-check="true"
            class="main"
        >
          <li v-for="(item , index) in memList" class="main_cell" :key="item.id">
            <member-list-item-new :item="item" :index="index"></member-list-item-new>
          </li>
          <listload :stateLoad="loading"></listload>
          <list-no-more :LastData="LastData"></list-no-more>
        </ul>
      </div>
    </div>
    <search-input
            :searchRoute="searchRoute"
            @feedData="feedData"
            @readySelect="readySelect"></search-input>
  </div>
</template>
<script type="text/ecmascript-6">
  import memberListItem from '@/components/spread/MemberlistItem.vue';
  import SearchItem from '@/components/common/SearchItem.vue';
  import SearchInput from '@/components/spread/SearchInput.vue';
  import MemSearchItemTop from '@/components/spread/MemSearchItemTop';
  // 下边是正常列表引用组件
  import memberListStatistics from '@/components/spread/Memberliststatistics.vue';
  import MemberListItemNew from '@/components/spread/MemberListItemNew.vue';
  // 底部加载完成
  import ListNoMore from '@/components/common/ListNoMore';

  export default {
    name: `searchmem`,
    components: {
      memberListItem,
      SearchItem,
      SearchInput,
      MemSearchItemTop,
      memberListStatistics,
      MemberListItemNew,
      ListNoMore
    },
    data() {
      return {
        listState: true, // 控制显示成员列表还是显示查询结果的变量
        stateLoad: false,
        searchRoute: '/page/extension/memberlist',
        memData: {}, // 查询到的数据
        // 正常列表的数据
        state: true,
        secState: true,
        btn_One: [
          {name: '消费分销', active: 1}
//          {name: '代理商分销', active: 2},
//          {name: '代理商推代', active: 3}
        ],
        normalone: 'instart',
        indexsone: 0,
        btn_Sec: [
          {name: '全部', active: 1},
          {name: '第一消费', active: 2},
          {name: '第二消费', active: 3},
          {name: '第三消费', active: 4}
        ],
        normalsec: 'insec',
        indexssec: 0,
        btn_Thr: [
          {name: '全部', active: 1},
          {name: '本月', active: 2},
          {name: '今日', active: 3}
        ],
        normalthr: 'inthr',
        indexsthr: 0,
        sorts: false, // 排序样式变量
        sortState: 'asc', // 排序变量(升序降序)
        icon: 'icon',
        memListM: {}, // 统计数据
        memList: [], // 成员列表主体数据
        loading: false, // 滑到底部加载
        LoadData: true, // 是否应该调用获取数据方法
        LastData: false, // 数据是否加载完没有了
        classStatus: 'all', // 第几消费者向后台传递的那个参数
        timeStatus: 'all', // 时间向后台传递的那个参数
        page: 0 // 页数
      };
    },
    created() {
      this.getDataM(); // 调用获取统计数据
      this.loadMore(); // 调用获取统计数据方法
    },
    methods: {
      feedData(res) {
        if (res !== '') {
          this.listState = false;
          let data = {
            name: res.name,
            uimg: res.uimg,
            uid: res.selectId,
            rebate: res.rebate,
            agentName: res.agent.name,
            up_agent: res.up_agent,
            up1: res.up1,
            up2: res.up2,
            up3: res.up3,
            status: res.status
          };
          // 组装数据
          this.memData = data;
          console.log(this.memData, '这次是实打实的');
        } else {
          this.memData.status = '';
          this.listState = true;
        }
      },
      readySelect(state) {
//        this.listState = false;
        alert('该用户非您下级，或暂无上级，您不能查询!');
        this.stateLoad = state;
      },
      // 正常列表的方法
      checkFun(index) {
        if (index === 0) {
          this.btn_Sec = [
            {name: '全部', active: 1},
            {name: '第一消费', active: 2},
            {name: '第二消费', active: 3},
            {name: '第三消费', active: 4}
          ];
          this.secState = true;
        } else if (index === 1) {
          this.secState = false;
        } else {
          this.secState = true;
          this.btn_Sec = [
            {name: '总代', active: 1},
            {name: '区代', active: 2},
            {name: '合伙人', active: 3},
            {name: 'VIP', active: 4}
          ];
        }
        // 调用查询方法
        //  如果筛选条件改变了，调用查询方法
        if (index !== this.indexsone) {
          this.loadMoreOut();
        }
        this.indexsone = index;
      },
      checkFun2(index) {
        // 调用查询方法
        //  如果筛选条件改变了，调用查询方法
        if (index !== this.indexssec) {
          if (index === 0) {
            this.classStatus = 'all';
          } else if (index === 1) {
            this.classStatus = 'first';
          } else if (index === 2) {
            this.classStatus = 'second';
          } else if (index === 3) {
            this.classStatus = 'third';
          }
          this.loadMoreOut();
        }
        this.indexssec = index;
      },
      checkFun3(index) {
        // 调用查询方法
        //  如果筛选条件改变了，调用查询方法
        if (index !== this.indexsthr) {
          if (index === 0) {
            this.timeStatus = 'all';
          } else if (index === 1) {
            this.timeStatus = 'month';
          } else if (index === 2) {
            this.timeStatus = 'today';
          }
          this.loadMoreOut();
        }
        this.indexsthr = index;
      },
      sortFun() {
        // 切换排序方法1
        this.sorts = !this.sorts; // 切换样式
        this.sorts === true ? this.sortState = 'ASC' : this.sortState = 'DESC';
        this.loadMoreOut();
      },
      getDataM() {
        // 获取统计数据
        this.$Spread.getmemList({method: 'getnum'}).then(res => {
          this.memListM = res;
          this.state = false;
        }, () => {
          this.state = false;
        });
      },
      loadMore(type) {
        // 获取数据和上拉加载共用方法
        if (this.LoadData === true) {
          // 上拉加载更多
          this.loading = true;
          // 封掉查询数据接口
          this.LoadData = false;
          this.$Spread.getmemList({
            method: 'getlist',
            class: this.classStatus,
            time: this.timeStatus,
            sorts: this.sortState,
            page: this.page
          }).then(res => {
            this.page++;
            // 去掉初始遮罩
            this.state = false;
            // 组装数据
            if (res.list) {
              res.list.map((item, index) => {
                this.memList.push(item);
              });
              // 对返回数据的数量进行判断，如果小于每页规定的就不要再请求了
              let DataNum = res.list.length;
              if (DataNum < 10) {
                this.LoadData = false;
                this.loading = false;
                this.LastData = true;
                return;
              }
              // 查看本地组装后的数据
              // 去掉上拉加载动画
              this.loading = false;
              //  打开查询数据接口
              this.LoadData = true;
            } else {
              alert(res.msg);
              this.loading = false;
            }
          }, () => {
            this.state = false;
          });
        }
      },
      loadMoreOut() {
        // 点击头部按钮根据条件查询的方法
        this.memList = []; // 主数据清空
        this.LoadData = true;// 防止不能发送请求
        this.LastData = false;// 更好的显示，把没有更多隐藏
        this.page = 0; // 每次筛选把页码还原
        this.loadMore();
      }
//      demo() {
//        // 测试方法
//        this.$router.push({name: 'memberseclist'});
//      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .demo_in {
    width 100vw;
    padding: 0 3vw;
    flex-y();
    box-sizing: border-box;
  }

  .space {
    space()
  }

  .main {
    box-sizing border-box;
  }

  .main_cell {
    box-sizing border-box;
    margin-top: 2vw
  }

  // 正常列表样式
  .main {
    box-sizing border-box;
  }

  .main_cell {
    box-sizing border-box;
    margin-top: 2vw
  }

  .sort {
    transform: rotate(180deg);
  }

  .min_s {
    word(13px, #666)
  }

  .min_sp {
    word(16px, #666)
  }

  .main_t {
    word(16px, #000)
  }

  .icon {
    width: 3vw
  }

  .top3_r {
    flex-x();
    padding 0 3vw
    justify-content: space-around
  }

  .top3_in {
    flex-x();
    flex: 3;
    justify-content: flex-start;
    & li {
      text-align center;
      width vw(66px);
    }
  }

  .inthr {
    word(14px, #666);
  }

  .activesthr {
    color: main-color
  }

  .top3 {
    flex-x();
    width 100%;
    box-sizing border-box;
    height: vw(32px)
    background #fff
  }

  .basicsline {
    width: 100vw;
    height: 1px;
    background: border-color
  }

  .insec {
    word(14px, #666);
    text-align: left;
  }

  .activessec {
    color: main-color;
  }

  .top1 {
    flex-x();
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    background #fff
    padding: 3vw 3vw;
    & li {
      width: vw(95px);
      margin-right: 6vw;
      text-align center
    }
  }

  .instart {
    word(14px, #666);
  }

  .top2 {
    background #fff
    flex-x();
    width: 100%;
    box-sizing: border-box;
    padding: 0 5vw;
    height: 10vw
  }

  .top {
    width: 100vw;
    box-sizing border-box
    flex-y();
    align-items center
  }

  .activesone {
    color: #fff;
    background gradient-color;
    height vw(33px)
    width vw(95px)
    flex-x()
    justify-content center
  }

  .out {
    width: 100vw;
    flex-x();
    height: 20vw
  }
</style>
